<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #app {
            width: 600px;
            margin: 10px auto;
        }

        table {
            width: 100%;
            text-align: center;
        }

        tr:nth-child(even) {
            background-color: pink;
        }

        tr:nth-child(odd) {
            background-color: lightblue;
        }
    </style>


</head>

<body>
    <div id="app">
        <fieldset>
            <legend>员工信息录入</legend>
            <form>
                <p>
                    <label for="username">姓名：</label>
                    <input type="text" v-model="username" id="username" placeholder="请输入姓名">
                </p>
                <p>
                    <label for="age">年龄：</label>
                    <input type="text" v-model="age" id="age" placeholder="请输入年龄">
                </p>
                <p>
                    <label for="gender">性别：</label>
                    <select v-model="gender" id="gender">
                        <option value="男">男</option>
                        <option value="女">女</option>
                    </select>
                </p>
                <p>
                    <button @click.prevent="addEmployee">添加</button>
                </p>
            </form>
        </fieldset>

        <table>
            <tr>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
                <th>操作</th>
            </tr>

            <tr v-for="employee in employeeList" :key="employee.id">
                <td>{{employee.username}}</td>
                <td>{{employee.age}}</td>
                <td>{{employee.gender}}</td>
                <td><button @click.stop="deleteEmployee(employee.id)">删除</button></td>
            </tr>
        </table>
    </div>


    <!-- 引入vue -->
    <script src=" https://unpkg.com/vue@3/dist/vue.global.js">
    </script>
    <script>
        const { createApp, ref, reactive } = Vue;
        // 创建Vue实例
        const app = createApp({
            setup() {
                const username = ref('')
                const age = ref('')
                const gender = ref('男')

                const employeeList = ref([
                    { id: '001', username: '格莱', age: 18, gender: '男' }
                ])

                const addEmployee = () => {
                    if (username.value === '' || age.value === '') {
                        return alert('姓名和年龄不能为空')
                    }
                    employeeList.value.push({
                        id: new Date().toLocaleTimeString(),
                        username: username.value,
                        age: age.value,
                        gender: gender.value
                    })
                    // 清除输入框内容
                    username.value = ''
                    age.value = ''
                    gender.value = '男'
                }


                // 删除员工信息
                const deleteEmployee = (id) => {
                    // 删除操作
                    // employeeList.value = employeeList.value.filter((item) => item.id !== id)
                    // 1. 找到要删除的员工对象在数组总的下标
                    const index = employeeList.value.findIndex(item => item.id === id)
                    console.log("index===>", index);
                    employeeList.value.splice(index, 1)

                }
                return {
                    username,
                    age,
                    gender,
                    employeeList,
                    addEmployee,
                    deleteEmployee
                }
            }
        })
        // 挂载到dom
        app.mount('#app')
    </script>
</body>

</html>